<script setup>
import { computed,ref,onMounted } from 'vue';
import {Get} from "@/axios/api.js";
import {ElMessage} from "element-plus";

const props = defineProps(['properties']);

// var columnNames = ref([])
// const fieldMapping = ref({});
// const map = ref([])

// //拿到中文字段名称
// function getColumnName() {
//   Get('/River/getcolumnname',{}).then((response) => {
//     const { code, msg, data: res } = response.data;
//     if (code === 200) {
//       columnNames.value = res
//
//       // 创建字段名映射
//       columnNames.value.forEach(item => {
//         fieldMapping.value[item.prop] = item.label;
//       });
//
//
//       console.log("1111111111111111111"+map.value);
//     } else {
//       ElMessage.error(msg);
//     }
//   });
// }
// // 确保在组件挂载后执行请求
// onMounted(() => {
//   getColumnName()
//
// });
// 使用映射转换字段名，并创建表格数据
const dataList = computed(() => {
  return Object.entries(props.properties).map(([key, value]) => ({ key, value }));
});



</script>

<template>
  <el-table :data="dataList" border style="width: 100%">
    <el-table-column prop="key" label="键" width="180"></el-table-column>
    <el-table-column prop="value" label="值"></el-table-column>
  </el-table>
</template>
<style scoped>


.el-table {
  /* 设置表格背景色 */
  background-color: #ffffff;
  /* 设置文字颜色 */
  color: #333333;
  /* 设置文字大小 */
  font-size: 14px;
  /* 设置表格宽度 */
  width: 100%;
}

/* 表头样式 */
.el-table thead {
  background-color: #a36565;
}

/* 表格行高 */
.el-table td, .el-table th {
  padding: 12px 0; /* 增加垂直内边距 */
}

/* 表格边框 */
.el-table::before {
  left: 0;
}

/* 鼠标悬停效果 */
.el-table tr:hover > td {
  background-color: #f0f0f0;
}

/* 交替行颜色 */
.el-table .el-table__body tr.el-table__row--level-0:nth-child(odd) {
  background: #f8f8f8;
}

/* 字段列样式 */
.el-table .cell {
  word-break: break-all; /* 自动换行 */
}

/* 调整表头字体大小和颜色 */
.el-table .el-table__header .cell {
  font-size: 16px;
  color: #444444;
}

/* 调整单元格字体大小和颜色 */
.el-table .el-table__body .cell {
  font-size: 14px;
  color: #555555;
}
</style>